<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>实训第六次课仿apple官网</title>
		<link rel="stylesheet" type="text/css" href="css/apple-iphone.css"/>
	</head>
	<body>
		<div class="wideBox">
			<div class="header">
				<div class="adv-wrapper">
					<div class="adv-wrapper-text">&lt;广告&gt;</div>
				</div>
				<div class="navbar">
					<ul class="navbar-icon">
						<li>
							<a href="#"><img src="img/svg/icon_image_large.svg"/></a>
						</li>
						<li>
							<a href="#">Mac</a>
						</li>
						<li>
							<a href="#">iPad</a>
						</li>
						<li>
							<a href="#">iPhone</a>
						</li>
						<li>
							<a href="#">Watch</a>
						</li>
						<li>
							<a href="#">Music</a>
						</li>
						<li>
							<a href="#">技术支持</a>
						</li>
						<li>
							<a href="#"><img src="img/svg/search_image_large.svg"/></a>
						</li>
						<li>
							<a href="#"><img src="img/svg/bag_image_large.svg"/></a>
						</li>
					</ul>
				</div>
				<div class="product">
					<ul>
						<li>
							<a href="#" class="product-icon">
								<figure>
									<img src="img/svg/iphone7_dark_large.svg" />
								</figure>
								<span>iPone 7</span>
								<span class="font-blue">新款</span>
							</a>
						</li>
						<li>
							<a href="#" class="product-icon">
								<figure>
									<img src="img/svg/iphone6s_dark_large.svg" />
								</figure>
								<span>iPone 6s</span>
							</a>
						</li>
						<li>
							<a href="#" class="product-icon">
								<figure>
									<img src="img/svg/iphonese_dark_large.svg" />
								</figure>
								<span>iPone SE</span>
							</a>
						</li>
						<li>
							<a href="#" class="product-icon">
								<figure>
									<img src="img/svg/iphone_ios_dark_large.svg" />
								</figure>
								<span>iOS 10</span>
							</a>
						</li>
						<li>
							<a href="#" class="product-icon">
								<figure>
									<img src="img/svg/iphone_acc_dark_large.svg" />
								</figure>
								<span>配件</span>
							</a>
						</li>
						<li>
							<a href="#" class="product-icon">
								<figure>
									<img src="img/svg/iphone_comp_dark_large.svg" />
								</figure>
								<span>机型比较</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="content">
				<div class="content-theme">
					<div class="content-txt">
						<h2 class="h2-first">iPhone</h2>
						<h2 class="h2-second">7，在此。</h2>
						<a>进一步了解&gt;&nbsp;</a>
						<a>购买&gt;</a>
						<p>或立即到<a>Apple零售店</a>选购。</p>
					</div>
					<figure>
						<img src="img/iphoneImg/hero_large.jpg"/>
					</figure>
				</div>
				<div class="content-list list-box-middle">
					<ul class="bg-red-box bgcolor-red">
						<li class="red-left">
							<figure>
								<img src="img/iphoneImg/iphone_7_product_red_large.jpg" />
							</figure>
						</li>
						<li class="red-right font-white">
							<span>特别版</span>
							<h2>iPone7,现更以红色呈现。</h2>
							<a href="#">购买&gt;</a>
							<a href="#">或立即到Apple Store零售店选购&gt;</a>
						</li>
					</ul>
				</div>
				<div class="content-list list-box-middle">
					<div class="bg-red-box">
						<div class="img-left left-img-black">
							<div class="takeshoot-position">
								<h2 class="img-black-bgimg font-white">使用iPhone7</h2>
								<h2 class="font-white">拍摄的窍门</h2>
								<div class="img-a-link">
									<a href="#" class="font-blue">进一步了解&gt;</a>
								</div>
							</div>
						</div>
						<div class="img-right right-img-pink font-white">
							<div class="img-txt-height">
								<p>换成iPhone的理由</p>
								<h2>有了iPhone，生活多轻松。</h2>
								<div class="img-a-link">
									<a href="#">进一步了解&gt;&nbsp;</a>
									<a href="#">购买iPhone&gt;</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="content-list list-box-middle">
					<div class="bg-red-box">
						<div class="img-left left-img-perpoul font-white">
							<div class="img-txt-height">
								<img src="img/iphoneImg/clips_icon_large.png">
								<h2>Clips 全新登场</h2>
								<p>有话说，短片来。</p>
								<a href="#" class="play-block font-blue">&nbsp;进一步了解&gt;</a>
								<a href="#" class="play-block font-blue">&nbsp;为iPhone和iPad免费下载&gt;</a>
							</div>
							<img src="img/iphoneImg/clips_hardware_large.png">
						</div>
						<div class="img-right right-img-white">
							<div class="img-txt-height">
								<p>AirPods</p>
								<h2>无线，无繁琐，</h2>
								<h2>只有妙不可言。</h2>
								<div class="img-a-link">
									<a href="#" class="play-block">进一步了解&gt;</a>
								</div>
							</div>
							<img src="img/iphoneImg/airpods_large.jpg">
						</div>
					</div>
				</div>
				<div class="content-ios11">
					<div class="bg-red-box bgcolor-white">
						<div class="left-txt">
							<img src="img/iphoneImg/icon_ios11_large.jpg">
							<h2>为iPhone带来巨大进步。</h2>
							<p>iOS 11 让 iPhone 变得更为智能，甚至可以不断学习你的使用习惯。它多才多艺,能以更个性化的方式来助你一臂之力，同时又能干得力，强大更胜以往。</p>
							<a href="#" class="play-block">进一步了解iOS11&gt;</a>
							<span>今秋推出</span>
						</div>
						<div class="right-img-iOS11">
							<img src="img/iphoneImg/iphone_ios11_large.jpg">
						</div>
					</div>
				</div>
				<div class="content-ios11">
					<div class="bg-red-box bgcolor-white">
						<div class="bgcolor-white-title">
							<h2>iPhone机型比较</h2>
							<a href="#">找到适合你的iPhone &gt;</a>
						</div>
						<div class="img-list">
							<ul>
								<li >
									<img src="img/iphoneImg/compare_iphone_7_plus_large.jpg">
									<img src="img/iphoneImg/compare_logo_iphone_7_plus_large.png">
								</li>
								<li>
									<img src="img/iphoneImg/compare_iphone_7_large.jpg">
									<img src="img/iphoneImg/compare_logo_iphone_7_large.png">
								</li>
								<li>
									<img src="img/iphoneImg/compare_iphone_6s_plus_large.jpg">
									<img src="img/iphoneImg/compare_logo_iphone_6s_plus_large.png"/>
								</li>
								<li>
									<img src="img/iphoneImg/compare_iphone_6s_large.jpg">
									<img src="img/iphoneImg/compare_logo_iphone_6s_large.png">
								</li>
								<li>
									<img src="img/iphoneImg/compare_iphone_se_large.jpg">
									<img src="img/iphoneImg/compare_logo_iphone_se_large.png">
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="content-list list-box-middle">
					<div class="bg-red-box">
						<div class="img-left-big left-img-white">
							<div class="img-txt-height">
								<img src="img/iphoneImg/clips_icon_large.png">
								<h2>加入iPone</h2>
								<h2>年年焕新计划</h2>
							</div>
							<img src="img/iphoneImg/iphone_upgrade_alt_large.jpg">
							<ul class="font-black play-block">
								<li>每年升级换购新 iPhone</li>
								<li>无需运营商合约</li>
								<li>全额支付或分期付款</li>
								<li>AppleCare+ 全方位服务计划为 iPhone 提供保护</li>
								<li>
									<a href="#" class="font-blue">了解详情 &gt;</a>
								</li>
							</ul>
							
						</div>
						<div class="img-right-big right-img-white">
							<div class="img-txt-height">
								<h2>以旧换新，</h2>
								<h2> 入手新iPhone。</h2>
								<span>以你符合条件的智能手机来换购新 iPhone，享受最高可达 RMB 2,520 的折抵优惠。</span>
								<div class="img-a-link">
									<a href="#" class="play-block">进一步了解 &nbsp;&gt;</a>
								</div>
							</div>
							<img src="img/iphoneImg/iphone_tradeup_large.jpg">
						</div>
						</div>
				</div>
				<div class="content-list list-box-small">
					<div class="bg-txt-box">
						<div class="img-left txt-height">
							<img src="img/iphoneImg/icon_pickup_large.png">
							<h2>分期付款</h2>
							<p>符合条件的信用卡用户可选择灵活的分期付款方式。</p>
							<div class="img-a-link">
								<a href="#">进一步了解&gt;</a>
							</div>
						</div>
						<div class="img-right txt-height">
							<img src="img/iphoneImg/icon_shipping_large.png">
							<h2>免费送货</h2>
							<p>享受免费送货上门服务。</p>
							<div class="img-a-link">
								<a href="#">进一步了解&gt;</a>	
							</div>
						</div>
					</div>
				</div>
				<div class="content-list list-box-big">
					<div class="bg-red-box">
						<div class="img-left-big bgcolor-white font-black">
							<div class="img-txt-height">
								<h2>如何购买iPhone</h2>
								<div class="img-a-link">
									<a href="#">进一步了解&gt;</a>
								</div>
							</div>
							<img src="img/iphoneImg/ways_to_buy_large.jpg">
						</div>
						<div class="img-right-big right-img-lessblack font-white">
							<div class="img-txt-height">
								<p>配件</p>
								<h2>百般搭配，一样惹人注目。</h2>
								<div class="img-a-link">
									<a href="#">选购iPhone配件&gt;</a>
								</div>
							</div>
							<img src="img/iphoneImg/accessories_large.jpg">
						</div>
					</div>
				</div>
				<div class="content-applepay bgcolor-lessgray">
					<div class="bg-txt-box">
						<figure class="red-left">
							<img src="img/iphoneImg/apple_pay_large.jpg" />
						</figure>
						<div class="left-txt">
							<img src="img/iphoneImg/apple_pay_logo_large.png" />
							<p>有了 Apple Pay，轻轻一触*，你就可以使用 iPhone 在全国数千家商店及众多 app 内安全、简单地进行支付。</p>
							<div class="img-a-link">
								<a href="#">进一步了解&gt;</a>
							</div>
						</div>
					</div>
				</div>
				<div class="content-ios11 bg-business">
					<div class="left-txt font-white">
						<h2>iPhone商务应用</h2>
						<div class="img-a-link">
							<a class="play-block">了解iPhone商务应用&gt;</a>
							<a>商务选购&gt;</a>
						</div>
					</div>
				</div>
			</div>
			<div class="footer">
				<div class="foot-middle-content">
					<div class="foot-require">
						<ul>
							<li>1. 只有符合 Apple 指定条件的 iPhone 才可参与本计划。</li>
							<li>2. 欲参与该计划的顾客需符合相应的资格条件，还需持有由合作银行发行的中国银联信用卡。需支付利率。须遵守完整条款。</li>
							<li>*完成支付可能需要输入密码，详情请洽发卡银行。</li>
							<li>双镜头摄像头仅于 iPhone 7 Plus 提供。亮黑色和红色外观仅提供 128GB 及 256GB 存储容量的机型。</li>
							<li>产品图像仅供参考，请以实际销售实物为准。</li>
						</ul>
					</div>
					<div class="foot-link-list">
						<div>
							<span class="icon-apple"><img src="img/svg/icon_large.svg"/></span>
							<span> > </span>
							<span> iPhone</span>
						</div>
						<div class="foot-link-list-content">
							<ul class="foot-list-box">
								<li>
									<ul>
										<li><h5>选购及了解</h5></li>
										<li><a href="#">Mac</a></li>
										<li><a href="#">iPad</a></li>
										<li><a href="#">iPhone</a></li>
										<li><a href="#">Watch</a></li>
										<li><a href="#">Music</a></li>
										<li><a href="#">iTunes</a></li>
										<li><a href="#">iPod</a></li>
										<li><a href="#">配件</a></li>
										<li><a href="#">App Store 充值卡</a></li>
									</ul>
								</li>
								<li>
									<ul>
										<li><h5>App Store 商店</h5></li>
										<li><a href="#">查找零售店</a></li>
										<li><a href="#">Genius Bar 天才吧</a></li>
										<li><a href="#">Today at Apple</a></li>
										<li><a href="#">Apple 夏令营</a></li>
										<li><a href="#">Field Trip 课外活动</a></li>
										<li><a href="#">Apple Store App</a></li>
										<li><a href="#">翻新和优惠</a></li>
										<li><a href="#">分期付款</a></li>
										<li><a href="#">重复使用和循环利用</a></li>
										<li><a href="#">订单状态</a></li>
										<li><a href="#">选购帮助</a></li>
									</ul>
								</li>
								<li>
									<ul>
										<li><h5>教育应用</h5></li>
										<li><a href="#">Apple 与教育</a></li>
										<li><a href="#">高校师生选购</a></li>
									</ul>
									<ul>
										<li><h5>商务应用</h5></li>
										<li><a href="#">Apple 与商务</a></li>
										<li><a href="#">商务选购</a></li>
									</ul>
								</li>
								<li>
									<ul>
										<li><h5>账户</h5></li>
										<li><a href="#">管理你的Apple ID</a></li>
										<li><a href="#">Apple Store 账户</a></li>
										<li><a href="#">iCloud.com</a></li>
										<li><a href="#"></a></li>
									</ul>
									<ul>
										<li><h5>Apple 价值观</h5></li>
										<li><a href="#">辅助功能</a></li>
										<li><a href="#">环境责任</a></li>
										<li><a href="#">隐私</a></li>
										<li><a href="#">供应商责任</a></li>
									</ul>
								</li>
								<li>
									<ul>
										<li><h5>关于 Apple</h5></li>
										<li><a href="#">Newsroom</a></li>
										<li><a href="#">Apple 管理层</a></li>
										<li><a href="#">工作机会</a></li>
										<li><a href="#">活动</a></li>
										<li><a href="#">联系 Apple</a></li>
									</ul>
								</li>
							</ul>
							<p>更多选购方式：前往 <a class="font-blue">Apple Store 零售店</a>，致电 400-666-8800 或查找在你附近的<a class="font-blue">授权经销商</a>。</p>
						</div>	
					</div>
					<div class="foot-copyright">
							<span>Copyright © 2017 Apple Inc. 保留所有权利。</span>
							<div class="illegel-info">
								<span>隐私政策</span>
								<span>|</span>
								<span>使用条款</span>
								<span>|</span>
								<span>销售政策</span>
								<span>|</span>
								<span>法律信息</span>
								<span>|</span>
								<span>网站地图</span>
							</div>
							<div class="country-info">
								<img src="img/iphoneImg/china.png"/>
								<span>中国</span>
							</div>
						</div>
				</div>
			</div>
		</div>
	</body>
</html>
